<ion-header>
    <header-component>
        <ion-toolbar>
            <ion-buttons *ngIf="iconShow" class="button-left">
                <img navBackButton src="assets/imgs/return.svg" alt="">
            </ion-buttons>
            <ion-title>{{ sysName }}</ion-title>
        </ion-toolbar>
    </header-component>
</ion-header>

<ion-content>
    <div class="top">
        <div>
            <!-- 左边部分数据 -->
            <div class="left">
                <div>
                    <label>运行</label>
                    <p>{{ runs || 0 }}</p>
                </div>
                <div>
                    <label>停梯</label>
                    <p>{{ stops || 0 }}</p>
                </div>
            </div>

            <!-- 中间部分数据 -->
            <div class="mid">
                <section>
                    <div class="Text-init">
                        <div class="fire-alarm-info" *ngFor="let alarmInfo of alarmInfos" [ngStyle]="{ color: alarmInfo.alarmLevel === 3? '#FF1B1B' : '#FF8B02' }">
                            <span>{{ alarmInfo.deviceValueLastTime }}</span>
                            <p>{{ alarmInfo.deviceName + alarmInfo.alarmTypeName + ',告警值:' + alarmInfo.deviceValue }}</p>
                        </div>
                    </div>
                </section>
            </div>

            <!-- 右边部分数据 -->
            <div class="right">
                <div>
                    <label>故障</label>
                    <p>{{ faults || 0 }}</p>
                </div>
                <div>
                    <label>检修</label>
                    <p>{{ services || 0 }}</p>
                </div>
            </div>
        </div>

        <!-- 底部设备参数 -->
        <div>
            <div class="square" *ngFor="let params of Params">
                <div class="text">
                    <label class=" title ">{{ params.deviceName }}</label>
                    <span class="unit " *ngFor='let param of params.deviceParameters; first as isFirs'>
                        <label *ngIf="!isFirs ">/</label>
                        <label>{{ param.unit }}</label>
                    </span>
                </div>
                <div class="dataFlex ">
                    <div *ngFor="let param of params.deviceParameters; first as isFirs " class="text">
                        <span class="separator " *ngIf="!isFirs ">/</span>
                        <span [ngClass]='{"redColor ": param.alarmInfo}'>
                            {{ param.valueName || param.value  }}
                        </span>
                    </div>
                </div>
            </div>
        </div>


    </div>

    <!-- 设备类型及设备列表 -->
    <div class="bottom ">
        <div [ngStyle]="{display: group.devices.length ? 'block': 'none'} " class="each-device-type " *ngFor="let group of roomModes ; let i=i ndex ">
            <sub-title [subTitleName]="group.deviceTypeName" titleColor="#555 " titleHeight="36px " noLine="true " titleFontSize="14px " backgroundColor="#F2F5F8 " isLift="true " [subTitleNumber]="group.devices? group.devices.length : 0 "></sub-title>
            <div class="device-list " *ngIf="group.devices ">
                <div class="each-device " *ngFor="let device of ( group.devices | listLength: 0:4 );let index=index " (click)="device && device.cameraId ? toDeviceVideo(device) : toDevicePage(device,index,group)" [ngClass]='{ "seriousbg
                ": device && device.isRun && device.alarmLevel === 3 ? true : false,"grayColor ": device && device.isRun && device.alarmLevel != 3 && device.alarmLevel != 2 ? true : false,"alarmbg ": device && device.isRun && device.alarmLevel === 2 ? true : false }'>
                    <p class="title device-title" *ngIf="device">{{ device.deviceName }}</p>
                    <div class="content " *ngIf="device ">
                        <p style="position:absolute;bottom: 0;width: 100%;margin: 0;" [ngStyle]="{ color: device.isOpen === '停止'? '#777' : '#25990E'}" *ngIf='device && device.isRun && device.roomSrc && device.deviceTypeId !== 3101 && device.deviceTypeId !== 3102'>{{ device.isOpen}}</p>
                        <img *ngIf='device && device.isRun && device.roomSrc && device.deviceTypeId === 3101 || device && device.isRun && device.roomSrc && device.deviceTypeId === 3102' [src]="device.roomSrc " alt=" ">
                    </div>
                    <ion-icon *ngIf='device && !device.isRun' name="close"></ion-icon>
                </div>
            </div>
        </div>
    </div>

</ion-content>